<template>
  <view class="job-detail-page">
    <!-- 加载状态 -->
    <view class="loading" v-if="isLoading">
      <uni-icons type="loading" size="20" color="#666" spin></uni-icons>
      <text>加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view class="error-state" v-if="errorMsg">
      <text>{{ errorMsg }}</text>
      <button @click="fetchJobDetail">重试</button>
    </view>

    <!-- 内容区域（数据加载完成后显示） -->
    <view v-if="!isLoading && !errorMsg">
      <view class="job-card">
        <view class="job-header">
          <text class="job-title">{{ jobData.positionName }}</text>
          <text class="salary">{{ jobData.salary }}</text>
        </view>
        
        <view class="job-meta">
          <text class="meta-item">{{ jobData.city }}</text>
          <text class="meta-item">{{ jobData.experience }}</text>
          <text class="meta-item">{{ jobData.education }}</text>
        </view>
      </view>

      <view class="function-buttons">
        <button class="func-btn collect-btn" @click="handleCollect">
          <uni-icons type="star" size="18" color="#999" v-if="!jobData.collect"></uni-icons>
          <uni-icons type="star-filled" size="18" color="#FFCC00" v-if="jobData.collect"></uni-icons>
          <text>收藏</text>
        </button>
        <button class="func-btn deliver-btn" @click="handleDeliver">
          <uni-icons type="paperplane" size="18" color="#fff"></uni-icons>
          <text>投递简历</text>
        </button>
        <button class="func-btn ai-btn" @click="handleAiInterview">
          <text>AI模拟面试</text>
        </button>
      </view>

      <view class="hr-info" @click="goToHrDetail">
        <image 
          class="hr-avatar" 
          :src="jobData.hrAvatarUrl || '/static/default-avatar.png'" 
          mode="aspectFill"
          @error="e => e.target.src = '/static/default-avatar.png'"
        ></image>
        <view class="hr-text">
          <text class="hr-name">{{ jobData.respPerson || 'HR' }}</text>
          <text class="hr-company">{{ jobData.companyName }} · {{ jobData.respPos || 'HR' }}</text>
          <text class="hr-status">今日活跃</text>
        </view>
      </view>

      <view class="detail-content">
        <view class="detail-title">职位详情</view>
        
        <view class="detail-tags">
          <text 
            class="tag-item" 
            v-for="(tag, index) in jobData.positionTagsList" 
            :key="index"
          >
            {{ tag }}
          </text>
        </view>

        <!-- 职位描述（处理换行显示） -->
        <view class="section">
          <view class="section-title">职位描述</view>
          <view class="section-content">
            <text 
              v-for="(line, idx) in contentLines" 
              :key="idx"
              class="content-line"
            >
              {{ line }}
            </text>
          </view>
        </view>

        <view class="section">
          <view class="section-title">员工福利</view>
          <view class="section-content welfare-tags">
            <text 
              class="tag-item" 
              v-for="(welfare, index) in jobData.companyWelfareList" 
              :key="index"
            >
              {{ welfare }}
            </text>
          </view>
        </view>
      </view>

      <view class="company-info" @click="goToCompanyDetail">
        <image 
          class="company-logo" 
          :src="jobData.logo" 
          mode="aspectFill"
        ></image>
        <view class="company-text">
          <text class="company-name">{{ jobData.companyName }}</text>
          <text class="company-scale">
            {{ jobData.companySize }} · {{ jobData.industryType }} · {{ jobData.financingStage }}
          </text>
        </view>
        <uni-icons type="right" size="18" color="#999"></uni-icons>
      </view>

      <view class="map-section">
        <view class="section-title">工作地点</view>
        <text class="map-address">{{ jobData.address }}</text>
        <map 
          class="company-map" 
          :latitude="Number(jobData.latitude)" 
          :longitude="Number(jobData.longitude)"
          :markers="markers"
          show-location
        ></map>
      </view>

      <view class="similar-jobs">
        <view class="recommend-header">
          <view class="section-title recommend-title">相似岗位推荐</view>
          <text class="view-more-link" @click="goToMoreSimilarJobs">
            查看更多
          </text>
        </view>
        <view class="similar-job-item" v-for="item in jobsimilars" :key="item.id" @click="goToJobDetail(item.id)">
          <view class="similar-job-header">
            <text class="similar-job-title">{{ item.positionName }}</text>
            <text class="similar-job-salary">{{ item.salary }}</text>
          </view>
          <view class="similar-job-meta">
            <text class="similar-meta-item">{{ item.city }}</text>
            <text class="similar-meta-item">{{ item.experience }}</text>
            <text class="similar-meta-item">{{ item.education }}</text>
          </view>
          <view class="similar-job-company">
            <view class="company-left">
              <image
                class="company-avatar" 
                :src="item.logo " 
                mode="aspectFill"
              ></image>
              <text class="company-name">{{ item.companyName }}</text>
            </view>
            <view class="company-right">
              <text class="company-scale">{{ item.companySize }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getjobPostingDetailed, addjobCollect, deleteJobCollect } from "@/api/job.js";
import { getselectSimilar } from "@/api/attachmentResume.js";

export default {
  data() {
    return {
      // 基础状态
      isLoading: true,
      errorMsg: '',
      jobId: '',
      pageSize: 10,
      pageNum: 1,
      
      // 职位数据
      jobData: {},
      //相似岗位
      jobsimilars: []
    };
  },
  
  computed: {
    // 处理职位描述换行显示
    contentLines() {
      if (!this.jobData.content) return [];
      // 将换行符转换为数组元素
      return this.jobData.content.split('\n').filter(line => line.trim() !== '');
    },
    
    // 地图标记点
    markers() {
      return [ {
        id: 1,
        latitude: Number(this.jobData.latitude) || 0,
        longitude: Number(this.jobData.longitude) || 0,
        title: this.jobData.companyName
      } ];
    }
  },
  
  onLoad(options) {
    // 获取页面参数中的职位ID
    this.jobId = options.id;
    // 加载职位详情
    this.fetchJobDetail();
    // 获取相似职位
    this.getselectSimilars(); 
  },
  
  methods: {
    // 调用接口获取职位详情
    async fetchJobDetail() {
      this.isLoading = true;
      this.errorMsg = '';
      
      try {
        const res = await getjobPostingDetailed(this.jobId);
        if (res.code === 200) {
          this.jobData = res.data;
        } else {
          this.errorMsg = res.msg || '获取职位详情失败';
        }
      } catch (error) {
        console.error('接口请求失败:', error);
        this.errorMsg = '网络错误，请稍后重试';
      } finally {
        this.isLoading = false;
      }
    },
    
    // 收藏或取消收藏
    async handleCollect() {
      try {
        if (this.jobData.collect) {
          // 当前已收藏，执行取消收藏
          const res = await deleteJobCollect(this.jobId);
          if (res.code === 200) {
            this.jobData.collect = false; // 更新收藏状态
            uni.showToast({
              title: '取消收藏成功',
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: '取消收藏失败',
              icon: 'none'
            });
          }
        } else {
          // 当前未收藏，执行收藏
          const res = await addjobCollect(this.jobId);
          if (res.code === 200) {
            this.jobData.collect = true; // 更新收藏状态
            uni.showToast({
              title: '收藏成功',
              icon: 'none'
            });
          } else {
            uni.showToast({
              title: '收藏失败',
              icon: 'none'
            });
          }
        }
      } catch (error) {
        console.error('收藏/取消收藏失败:', error);
        uni.showToast({
          title: '操作失败，请稍后重试',
          icon: 'none'
        });
      }
    },
    
    // 投递简历
    handleDeliver() {
      if (this.jobData.submit) {
        uni.showToast({ title: '已投递过该职位', icon: 'none' });
        return;
      }
      uni.showToast({ title: '投递成功', icon: 'none' });
      // 实际项目中可调用投递接口
      // this.jobData.submit = true;
      // await deliverResume(this.jobId);
    },
    
    // 获取相似岗位
    async getselectSimilars() {
      const res = await getselectSimilar(this.jobId, this.pageNum, this.pageSize);
      if (res.code === 200) {
        this.jobsimilars = res.data.list.slice(0, 3);
      } else {
        this.errorMsg = res.msg || '获取失败';
      }
    },
    
    // AI模拟面试
    // AI模拟面试
handleAiInterview() {
  // 如果需要传递参数，先存储到全局状态或本地存储
  uni.setStorageSync('currentJobId', this.jobId);
  
  // 使用switchTab而不是navigateTo跳转到导航栏页面
  uni.switchTab({ url: '/pages/aiAssistant/aiAssistant' });
},
    
    // 跳转到公司详情
    goToCompanyDetail() {
	  uni.navigateTo({ url: `/pages/job/allJob/allJob?id=${this.jobData.id}` });
    },
    
    // 跳转到其他职位详情
    goToJobDetail(jobId) {
      uni.navigateTo({ url: `/pages/job/detail?id=${jobId}` });
    },
    
    // 查看更多相似职位
    goToMoreSimilarJobs() {
      uni.navigateTo({ url: `/pages/job/job` });
    }
  }
};
</script>

<style scoped>
.job-detail-page {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.job-card {
  padding: 16px;
  margin: 16px 16px 16px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.job-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.job-title {
  font-size: 20px;
  font-weight: 600;
  color: #000;
}
.salary {
  font-size: 16px;
  color: #409eff;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  color: #666;
  font-size: 14px;
}

.function-buttons {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
}

.func-btn {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 178, 106, 0.15);
  transition: box-shadow 0.3s ease;
}

.func-btn:active{
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transform:translateY(1px);
}

.collect-btn {
  background-color: #fff;
  color: #333;
   border: none;
}

.deliver-btn {
  background-color: #409eff;
  color: #fff;
  border: none;
}

.ai-btn {
  background-color: #67c23a;
  color: #fff;
  border: none;
}

.hr-info {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 16px;
  margin: 0 16px 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.hr-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
}
.hr-text {
  flex: 1;
  padding: 4px 0;
}
.hr-name {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
  display: block;
}
.hr-company {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
  display: block;
}
.hr-status {
  font-size: 12px;
  color: #409eff;
  background-color: rgba(0, 178, 106, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  padding: 16px 16px 8px;
  border-bottom: 1px solid #f5f5f5;
}

.detail-tags, .welfare-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
}

.detail-tags {
  border-bottom: 1px solid #f5f5f5;
}

.tag-item {
  padding: 6px 12px;
  font-size: 13px;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: none;
  display: inline-block;
}

.detail-content {
  background-color: #fff;
  margin: 0 16px 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.section {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}
.section:last-child {
  border-bottom: none;
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}
.section-content {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
}
.content-item {
  margin-bottom: 10px;
}
.content-item:last-child {
  margin-bottom: 0;
}

.company-info {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 16px;
  margin: 0 16px 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.company-logo {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  margin-right: 16px;
  object-fit: cover;
}
.company-text {
  flex: 1;
  padding: 4px 0;
}
.company-name {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
  display: block;
}
.company-scale {
  font-size: 13px;
  color: #666;
  display: block;
}

.map-section {
  background-color: #fff;
  margin: 0 16px 16px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.map-address {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  display: block;
  padding: 4px 0;
}
.company-map {
  width: 100%;
  height: 220px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* 相似岗位推荐样式 */
.similar-jobs {
  background-color: #fff;
  margin: 0 16px 80px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.recommend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.recommend-title {
  padding: 0;
  border-bottom: none;
  margin-bottom: 0;
}
.view-more-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
}
.job-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.similar-job-item {
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
}
.similar-job-item:last-child {
  border-bottom: none;
}

.similar-job-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.similar-job-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}
.similar-job-salary {
  font-size: 15px;
  color: #409eff;
  font-weight: 500;
}

.similar-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  color: #666;
  font-size: 13px;
}

.similar-job-company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.company-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.company-avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}
.company-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.company-right {
  display: flex;
  align-items: center;
}
.company-scale {
  font-size: 12px;
  color: #666;
}
</style>